<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>022-HTML5地理定位</title>
</head>

<body>
    <p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
    <button onclick="getLocation()">点我</button>

    <script>
        var x = document.getElementById('demo');
        function getLocation() {
            // 检测是否支持地理定位
            // 如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
            if (navigator.geolocation) {
                // 请使用 getCurrentPosition() 方法来获得用户的位置。
                navigator.geolocation.getCurrentPosition(showPosition);
                // 如果 getCurrentPosition() 运行成功，则向参数showPosition中规定的函数返回一个 coordinates 对象
            } else {
                x.innerHTML = "该浏览器不支持获取地理位置。";
            }
        }
        // showPosition() 函数获得并显示经度和纬度
        function showPosition(position) {
            x.innerHTML = "纬度：" + position.coords.latitude + "<br />经度：" + position.coords.longitude;
        }
    </script>
</body>

</html>